<template id="personal">
  <div class="container">
    <div class="left-container">
      <div class="user-info">
        <center>
          <div style="color: #333">
            <img
              v-show="userStore.userInfo.avatar"
              :src="userStore.userInfo.avatar"
              class="avatar"
              style="width: 100px; height: 100px; border-radius: 50%"
            />
            <div class="name">{{ userStore.userInfo.enterpriseName }}</div>
            <el-tag type="primary" plain class="tag">企业</el-tag>
          </div>
        </center>

        <div class="simpleAndEasy-info">
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="companyIndustry"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.companyIndustry }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="companySize"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.companySize }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="financingStage"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.financingStage }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="companyRegion"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.companyRegion }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="phone"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.phone }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="email"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div>{{ userStore.userInfo.email }}</div>
          </div>
          <div style="display: flex">
            <span
              ><svg-icon
                icon-name="companyProfile"
                style="width: 20px; height: 20px; margin-right: 10px"
              ></svg-icon
            ></span>
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 150px;
              "
            >
              {{ userStore.userInfo.companyProfile }}
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; margin-bottom: 15px">
          <el-button
            style="width: 100%; height: 30px; background-color: #d4eaf7"
            @click="openEditModal"
            >修改资料</el-button
          >
        </div>
      </div>
      <div class="border">
        <div
          style="margin-bottom: 20px; display: flex; justify-content: center"
        >
          根据学生投递简历实时更新数据
        </div>
        <div class="centerleft" style="height: 20vh; width: 100%"></div>
        <div class="centercenter" style="height: 20vh; width: 100%"></div>
        <div class="centerright" style="height: 20vh; width: 100%"></div>
      </div>
    </div>

    <div class="right-container">
      <div class="positionInformation">
        <h3 style="padding: 5px">岗位发布信息</h3>
        <hr style="border-color: rgb(255 249 249)" />

        <div class="post-info">
          <div class="right" v-for="(item, index) in positionArr" :key="index">
            <el-empty
              description="暂无岗位发布信息"
              v-if="positionArr.length === 0"
            />
            <div>
              <div class="above">
                <div style="display: flex">
                  <img
                    v-show="userStore.userInfo.avatar"
                    :src="userStore.userInfo.avatar"
                    class="avatar"
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      margin-right: 10px;
                    "
                  />
                  <div class="company-name">{{ item.companyName }}</div>
                </div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    font-family: monospace;
                    font-size: 15px;
                  "
                >
                  <div class="positionName" style="width: 50%">
                    {{ item.respPerson }}
                  </div>
                  <div class="positionName">{{ item.industryType }}</div>
                </div>
              </div>
              <div class="under">
                <div style="width: 134px">
                  <div class="position">{{ item.positionName }}</div>
                  <div class="place">{{ item.city }}</div>
                </div>
                <div>
                  <div class="position">{{ item.experience }}</div>
                  <div class="place" style="color: orange; font-weight: bold">
                    {{ item.salary }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="more" @click="tojobRecommendation">点击查看更多...</div>
      </div>
      <div class="resume-container">
        <div style="display: flex; justify-content: space-between">
          <h3 style="margin-top: 10px; margin-left: 5px">学生投递简历</h3>
          <div
            class="more"
            @click="openresumeVisible"
            style="width: 80%"
            v-if="resumeArr.length > 6"
          >
            点击查看更多...
          </div>
        </div>
        <div class="biographicalNotes">
          <div
            class="resume-right"
            v-for="(item, index) in resumeArr.slice(0, 9)"
            :key="index"
          >
            <div class="positioning">
              <div class="resume-company-name">{{ item.positionName }}</div>
              <div class="resume-positionName">
                <el-tag
                  type="warning"
                  round
                  class="p-10-20"
                  v-show="item.status === 5"
                  >等待用户投递简历</el-tag
                >
                <el-tag
                  type="warning"
                  round
                  class="p-10-20"
                  v-show="item.status === 6"
                  >用户拒绝投递简历</el-tag
                >
                <el-button
                  round
                  @click="perviewResume(item.resumeUrl)"
                  v-show="item.status !== 5 && item.status !== 6"
                  >点击预览学生简历</el-button
                >
              </div>
            </div>
            <div class="positioning">
              <div class="resume-company-name" style="font-size: 16px">
                {{ item.studentName }}
              </div>
              <div>
                <span style="font-size: 14px">提交时间：</span>
                <span style="font-size: 14px">{{ item.submitTime }}</span>
              </div>
            </div>
            <div
              class="positioning"
              v-show="item.status !== 5 && item.status !== 6"
            >
              <div class="resume-company-name" style="font-size: 16px">
                是否邀请面试
              </div>
              <div
                class="resume-positionName"
                v-show="item.status === 0 || item.status === 7"
              >
                <el-button
                  type="success"
                  plain
                  round
                  @click="modState(item.id, 1)"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  plain
                  round
                  @click="modState(item.id, 2)"
                  >拒绝</el-button
                >
              </div>
              <div class="resume-positionName" v-show="item.status !== 0">
                <el-tag
                  type="success"
                  round
                  class="p-10-20"
                  v-show="item.status === 1 || item.status === 3"
                  >通过</el-tag
                >
                <el-tag
                  type="danger"
                  round
                  class="p-10-20"
                  v-show="item.status === 2"
                  >未通过</el-tag
                >
              </div>
            </div>
            <div
              class="positioning"
              v-show="
                item.status !== 0 &&
                item.status !== 2 &&
                item.status !== 5 &&
                item.status !== 6 &&
                item.status !== 7
              "
            >
              <div class="resume-company-name" style="font-size: 16px">
                是否通过面试
              </div>
              <div
                class="resume-positionName"
                v-show="item.status === 1 || item.status === 2"
              >
                <el-button
                  type="success"
                  plain
                  round
                  @click="modState(item.id, 3)"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  plain
                  round
                  @click="modState(item.id, 4)"
                  >拒绝</el-button
                >
              </div>
              <div
                class="resume-positionName"
                v-show="item.status === 3 || item.status === 4"
              >
                <el-tag
                  type="success"
                  round
                  class="p-10-20"
                  v-show="item.status === 3"
                  >通过</el-tag
                >
                <el-tag
                  type="danger"
                  round
                  class="p-10-20"
                  v-show="item.status === 4"
                  >未通过</el-tag
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="编辑个人信息"
      width="500px"
      class="custom-edit-modal"
      v-model="userVisible"
    >
      <el-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        label-width="100px"
        class="custom-form"
      >
        <el-form-item label="行业" prop="sex" class="custom-form-item">
          <el-input
            v-model="formState.companyIndustry"
            placeholder="请输入企业行业"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="规模" prop="name" class="custom-form-item">
          <el-input
            v-model="formState.companySize"
            placeholder="请输入企业规模"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="阶段" prop="college" class="custom-form-item">
          <el-input
            v-model="formState.financingStage"
            placeholder="请输入融资阶段"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="sClass" class="custom-form-item">
          <el-input
            v-model="formState.companyRegion"
            placeholder="请输入企业地址"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="number" class="custom-form-item">
          <el-input
            v-model="formState.phone"
            placeholder="请输入企业联系电话"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" class="custom-form-item">
          <el-input
            v-model="formState.email"
            placeholder="请输入企业邮箱"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="email" class="custom-form-item">
          <el-input
            v-model="formState.companyProfile"
            placeholder="请输入企业简介"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="userVisible = false" style="padding: 5px"
          >取 消</el-button
        >
        <el-button type="primary" @click="modUserInfo" style="padding: 5px"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="学生投递的全部简历"
      v-model="resumeVisible"
      style="width: 80%"
    >
      <center>
        <div class="right-containers">
          <div class="resume-container">
            <div class="biographicalNotes">
  
                <div class="resume-right" v-for="(item, index) in resumeArr"
                :key="index">
                  <div class="positioning">
                    <div class="resume-company-name">
                      {{ item.positionName }}
                    </div>
                    <div class="resume-positionName">
                      <el-button round @click="perviewResume(item.resumeUrl)"
                        >点击预览学生简历</el-button
                      >
                    </div>
                  </div>
                  <div class="positioning">
                    <div class="resume-company-name" style="font-size: 16px">
                      {{ item.studentName }}
                    </div>
                    <div>
                      <span style="font-size: 14px">提交时间：</span>
                      <span style="font-size: 14px">{{ item.submitTime }}</span>
                    </div>
                  </div>
                  <div class="positioning" v-show="item.status !== 5">
                    <div class="resume-company-name" style="font-size: 16px">
                      面试状态
                    </div>
                    <div class="resume-positionName" v-show="item.status === 0">
                      <el-button
                        type="success"
                        plain
                        round
                        @click="modState(item.id, 1)"
                        >通过</el-button
                      >
                      <el-button
                        type="danger"
                        plain
                        round
                        @click="modState(item.id, 2)"
                        >拒绝</el-button
                      >
                    </div>
                    <div class="resume-positionName" v-show="item.status !== 0">
                      <el-tag
                        type="success"
                        round
                        class="p-10-20"
                        v-show="item.status === 1 || item.status === 3"
                        >通过</el-tag
                      >
                      <el-tag
                        type="danger"
                        round
                        class="p-10-20"
                        v-show="item.status === 2"
                        >未通过</el-tag
                      >
                    </div>
                  </div>
                  <div
                    class="positioning"
                    v-show="
                      item.status !== 0 ||
                      item.status !== 2 ||
                      item.status !== 5
                    "
                  >
                    <div class="resume-company-name" style="font-size: 16px">
                      是否通过面试
                    </div>
                    <div
                      class="resume-positionName"
                      v-show="item.status === 1 || item.status === 2"
                    >
                      <el-button
                        type="success"
                        plain
                        round
                        @click="modState(item.id, 3)"
                        >通过</el-button
                      >
                      <el-button
                        type="danger"
                        plain
                        round
                        @click="modState(item.id, 4)"
                        >拒绝</el-button
                      >
                    </div>
                    <div
                      class="resume-positionName"
                      v-show="item.status === 3 || item.status === 4"
                    >
                      <el-tag
                        type="success"
                        round
                        class="p-10-20"
                        v-show="item.status === 3"
                        >通过</el-tag
                      >
                      <el-tag
                        type="danger"
                        round
                        class="p-10-20"
                        v-show="item.status === 4"
                        >未通过</el-tag
                      >
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; width: 100%">
          <el-pagination
            v-model:current-page="currentPage"
            :hide-on-single-page="true"
            :page-size="12"
            :size="size"
            :background="true"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </center>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible"
      title="在线预览附件简历"
      width="1000"
      :before-close="handleClose"
    >
      <div>
        <iframe
          id="resume-iframe"
          :src="pdfUrl"
          style="width: 100%; height: 100vh"
        ></iframe>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { useUserInfor } from "@/stores/userInfo";
import { updateEmployInfo, getCount } from "@/api/userInformation";
import { updateState, getEmploymentJobPosting } from "@/api/position";
import { useRouter } from "vue-router";
import { getResume } from "@/api/attachmentResume";
import type { ComponentSize } from "element-plus";
import {
  experienceDistribution,
  educationDistribution,
  salsalaryDistributionary,
} from "@/api/visualizationData";
import * as echarts from "echarts";

const router = useRouter();
const userStore = useUserInfor();

onMounted(() => {
  console.log(userStore.userInfo);
  ruleForm.email = userStore.userInfo.email;
  ruleForm.avatar = userStore.userInfo.avatar;
  ruleForm.phone = userStore.userInfo.phone;
  ruleForm.enterpriseName = userStore.userInfo.enterpriseName; //企业名称·
  ruleForm.hiringIntention = userStore.userInfo.hiringIntention; //招聘意向
  ruleForm.companyRegion = userStore.userInfo.companyRegion; //公司区域
});

//个人信息
interface RuleForm {
  email: string;
  avatar: string;
  phone: string;
  enterpriseName: string;
  hiringIntention: string;
  companyRegion: string;
}

const ruleForm = reactive<RuleForm>({
  email: "",
  avatar: "",
  phone: "",
  enterpriseName: "",
  hiringIntention: "",
  companyRegion: "",
});

//获取地区信息
userStore.getProvinceList();
const companyRegion = ref([]);
//开启多选
const props = { multiple: true };

const options = userStore.provinceList.map((provinceItem) => ({
  value: provinceItem.province,
  label: provinceItem.province,
  children: provinceItem.city.map((cityItem) => ({
    value: cityItem,
    label: cityItem,
  })),
}));
const handleChange = (values) => {
  if (values.length > 3) {
    companyRegion.value = values.slice(0, 3);
    // 可以在这里添加一些用户提示，告知用户只能选择三个
    ElMessage.warning("最多只能选择三个地区");
  }
  ruleForm.companyRegion = "";
  for (let i = 0; i < companyRegion.value.length; i++) {
    ruleForm.companyRegion += companyRegion.value[i][1];
    if (i < companyRegion.value.length - 1) {
      ruleForm.companyRegion += ","; // 添加逗号分隔符
    }
  }
};

// 修改资料部分
const userVisible = ref(false);
const formState = reactive({
  companyIndustry: "",
  companySize: "",
  financingStage: "",
  companyRegion: "",
  phone: "", //电话
  companyProfile: "",
  email: "", //邮箱
});

// 打开编辑弹窗
const openEditModal = () => {
  // 初始化表单数据
  formState.companyIndustry = userStore.userInfo.companyIndustry || "";
  formState.companySize = userStore.userInfo.companySize || "";
  formState.financingStage = userStore.userInfo.financingStage || "";
  formState.companyRegion = userStore.userInfo.companyRegion || "";
  formState.phone = userStore.userInfo.phone || "";
  formState.email = userStore.userInfo.email || "";
  formState.companyProfile = userStore.userInfo.companyProfile || "";
  userVisible.value = true;
};

//控制个人信息的编辑与展示
// const isModUserInfo = ref(true);
//改变个人信息的展示与编辑
// const modInfo = () => {
//   isModUserInfo.value = false;
// };
//退出编辑
// const exitEditingUserInfo = () => {
//   userVisible.value = false;
// };
//更新个人信息
const modUserInfo = async () => {
  // userStore.updateUserInfo(ruleForm);
  const res = await updateEmployInfo(formState);
  if (res.code === 200) {
    ElMessage({
      message: "更新成功",
      type: "success",
    });
    userStore.queryEmployInfo();
    // isModUserInfo.value = true;
    userVisible.value = false;
  } else {
    ElMessage({
      message: "更新失败",
      type: "error",
    });
    // isModUserInfo.value = true;
    userVisible.value = false;
  }
};

//自动补全职位名称
interface RestaurantItem {
  value: string;
}
userStore.getJobNamesList(); // 获取学校列表

// 假设 userStore 中有 schoolList，且 schoolList 是字符串数组
// 将字符串数组转换为符合 RestaurantItem 接口的数组
const JobRestaurants = ref<RestaurantItem[]>(
  userStore.jobList.map((job) => ({ value: job }))
);

const querySearchForJob = (
  queryString: string,
  cb: (results: RestaurantItem[]) => void
) => {
  if (!JobRestaurants.value) {
    // 如果 JobRestaurants.value 是 undefined，返回空数组
    cb([]);
    return;
  }
  const results = queryString
    ? JobRestaurants.value.filter(createJobFilter(queryString))
    : JobRestaurants.value;

  // 调用回调函数返回建议列表
  cb(results);
};

const createJobFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

// 头像部分
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  ruleForm.avatar = URL.createObjectURL(uploadFile.raw!);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");

const resumeArr = ref([]);
const queryResume = async () => {
  const res = await getResume(currentPage.value, 10);
  resumeArr.value = res.data.list;
};
queryResume();

//分页变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  queryResume();
};

// 预览简历
const dialogVisible = ref(false);
const pdfUrl = ref();
const perviewResume = (url) => {
  console.log(url);

  pdfUrl.value = url;
  dialogVisible.value = true;

  console.log(pdfUrl.value);
};

//修改面试状态
const modState = async (id, status) => {
  const res = await updateState(id, status);
  if (res.code === 200) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    queryResume();
  } else {
    ElMessage({
      message: "修改失败",
      type: "error",
    });
  }
};

//获取职位信息
const positionArr = ref([]);
const queryPosition = async () => {
  const res = await getEmploymentJobPosting(1, 4);
  positionArr.value = res.data.list;
};
queryPosition();
//跳转职位信息
const tojobRecommendation = () => {
  router.push("/jobRecommendation");
};

//获取数据
const countData = ref();
const queryData = async () => {
  const res = await getCount();
  console.log(res);
  if (res.code === 200) {
    countData.value = res.data;
  } else {
    ElMessage.error("请检查网络问题");
  }
};
queryData();

//查看学生简历
const resumeVisible = ref(false);
const openresumeVisible = () => {
  resumeVisible.value = true;
};

//可视化
onMounted(() => {
  // 环状图数据展示
  let circularDiagram = echarts.init(document.querySelector(".centerleft"));

  // 获取工作经验分布数据
  const getExperienceDistribution = async () => {
    const res = await experienceDistribution();
    if (res.code === 200) {
      // 指定配置项和数据
      const circularDiagramOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        title: {
          // 添加标题配置
          text: "工作经验分布", // 标题文本
          left: "center", // 标题水平居中
          top: "center", // 标题垂直居中
          textStyle: {
            fontSize: 12, // 标题字体大小
            fontWeight: "bold", // 标题字体粗细
            color: "#333", // 标题字体颜色
          },
        },
        series: [
          {
            name: "工作经验",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}: {d}%",
              color: "#333",
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 10,
            },
            itemStyle: {
              borderRadius: 5,
              borderColor: "#333",
              borderWidth: 1,
            },
            data: res.data.map((item, index) => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: ["#6EAFDA", "#85C1E9", "#B5E7A0", "#FAC858", "#FC8D62"][
                  index % 5
                ],
              },
            })),
          },
        ],
      };
      // 将配置项设置给 ECharts 实例对象，使用刚指定的配置项和数据显示图表
      circularDiagram.setOption(circularDiagramOption);
    }
  };

  getExperienceDistribution();

  // 环状图数据展示
  let circularDiagramcenter = echarts.init(
    document.querySelector(".centercenter")
  );

  // 获取学历分布数据
  const getEducationDistribution = async () => {
    const res = await educationDistribution();
    if (res.code === 200) {
      // 指定配置项和数据
      const circularDiagramOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        title: {
          // 添加标题配置
          text: "学历分布", // 标题文本
          left: "center", // 标题水平居中
          top: "center", // 标题垂直居中
          textStyle: {
            fontSize: 12, // 标题字体大小
            fontWeight: "bold", // 标题字体粗细
            color: "#333", // 标题字体颜色
          },
        },
        series: [
          {
            name: "最高学历",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}: {d}%",
              color: "#333",
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 10,
            },
            itemStyle: {
              borderRadius: 5,
              borderColor: "#333",
              borderWidth: 1,
            },
            data: res.data.map((item, index) => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: ["#6EAFDA", "#85C1E9", "#B5E7A0", "#FAC858", "#FC8D62"][
                  index % 5
                ],
              },
            })),
          },
        ],
      };
      // 将配置项设置给 ECharts 实例对象，使用刚指定的配置项和数据显示图表
      circularDiagramcenter.setOption(circularDiagramOption);
    }
  };

  getEducationDistribution();

  // 环状图数据展示
  let circularDiagramright = echarts.init(
    document.querySelector(".centerright")
  );

  // 获取期望薪资数据
  const getSalsalaryDistributionary = async () => {
    const res = await salsalaryDistributionary();
    if (res.code === 200) {
      // 指定配置项和数据
      const circularDiagramOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        title: {
          // 添加标题配置
          text: "期望薪资分布", // 标题文本
          left: "center", // 标题水平居中
          top: "center", // 标题垂直居中
          textStyle: {
            fontSize: 12, // 标题字体大小
            fontWeight: "bold", // 标题字体粗细
            color: "#333", // 标题字体颜色
          },
        },
        series: [
          {
            name: "期望薪资",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}: {d}%",
              color: "#333",
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 10,
            },
            itemStyle: {
              borderRadius: 5,
              borderColor: "#333",
              borderWidth: 1,
            },
            data: res.data.map((item, index) => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: ["#6EAFDA", "#85C1E9", "#B5E7A0", "#FAC858", "#FC8D62"][
                  index % 5
                ],
              },
            })),
          },
        ],
      };
      // 将配置项设置给 ECharts 实例对象，使用刚指定的配置项和数据显示图表
      circularDiagramright.setOption(circularDiagramOption);
    }
  };

  getSalsalaryDistributionary();

  // 监听窗口大小变化，重新调整ECharts实例的大小
  window.addEventListener("resize", () => {
    circularDiagram.resize();
    circularDiagramcenter.resize();
    circularDiagramright.resize();
  });
});
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
}

.left-container {
  width: 20vw;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  // background-color: aqua;

  .user-info {
    width: 100%;
    // margin-bottom: 50px;
    border-radius: 10px;
    // background-color: aqua;

    .name {
      font-size: 24px;
      margin-bottom: 5px;
    }

    .simpleAndEasy-info {
      color: #333;
      margin-top: 10px;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .data-show {
    width: 100%;
    height: 30vh;
    border-radius: 10px;
    background-color: #d4eaf7;
    padding: -20px 0px 10px 10px;
    margin-top: 14vh;
    margin-bottom: 5vh;
    // padding-bottom: 10px;
    // padding-left: 10px;

    .statisticsNumber {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 5px;
      color: #3b3c3d;

      .content {
        margin-left: 10px;
      }
    }
  }
}

.right-container {
  width: 80%;
  // background-color: aqua;

  .positionInformation {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #d4eaf7;
    padding: 5px;

    .post-info {
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  .resume-container {
    width: 100%;
    border-radius: 10px;
    background-color: #d4eaf7;
    padding: 5px;
  }

  .biographicalNotes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.right {
  // background: rgba(255, 254, 251, 0.2);
  background-color: rgba(255, 255, 255, 0.5);
  // width: 22%;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果 */
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid #ccc;
}

.right:hover {
  transform: translateY(5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.resume-company-name {
  // color: #fff;
  font-size: 20px;
}

.resume-positionName {
  margin-bottom: 10px;
  box-sizing: border-box;
  margin-top: 10px;
}

.under {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  // color: #cbcbcb;
  font-family: monospace;
  font-size: 15px;
}

.tag {
  padding: 10px;
}

ul {
  padding-left: 0;
  list-style-type: none;
}

.header {
  display: flex;
  width: 100%;
}

.resume-right {
  // height: 190px;
  width: 27%;
  padding: 10px;
  margin: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #ccc;
}

.resume-right:hover {
  transform: translateY(5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  // background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.company-name {
  color: #333;
  // color: #fff;
  //   width: 100%;
  font-size: 18px;
  margin-bottom: 10px;
}

.header .resume-right .position,
.header .resume-right .year {
  width: calc(50% - 10px);
  box-sizing: border-box;
  // color: #cbcbcb;
}

.middle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.place {
  margin-bottom: 10px;
  box-sizing: border-box;
  // color: #cbcbcb;
}

.middle .right {
  width: 71%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.education {
  width: calc(50% - 10px);
  box-sizing: border-box;
  // color: #cbcbcb;
}

.salary {
  width: calc(50% - 10px);
  // color: #cbcbcb;
  box-sizing: border-box;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.footer .classify {
  width: 29%;
  padding: 10px;
  box-sizing: border-box;
}

.footer .descibe {
  width: 71%;
  padding: 5px;
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  /* 限制显示 6 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card {
  display: flex;
  height: 0px;
  padding: 3% 7%;
  align-items: center;
  justify-content: center;
}

.card p {
  margin: 0;
}

.detel {
  width: 50px;
  height: 30px;
  margin: 10px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid red;
  color: red;
  background: transparent;
  text-align: center;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.detel:hover {
  background-color: red;
  // color: #fff;
}

.positioning {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.p-10-20 {
  padding: 10px 20px;
}

.more {
  margin-top: 10px;
  width: 99%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  cursor: pointer;
}

.more:hover {
  color: #00bfff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.right-containers {
  width: 70vw;
  // background-color: aqua;

  .positionInformation {
    width: 100%;
    height: 32vh;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #d4eaf7;
    padding: 5px;

    .post-info {
      display: flex;
      justify-content: center;
    }
  }

  .resume-container {
    width: 100%;
    border-radius: 10px;
    background-color: #d4eaf7;
    padding: 5px;
  }

  .biographicalNotes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
</style>
